<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>MVC</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
        }
        body > section {
            width: 50vw;
            height: 50vh;
            outline: 1px solid red;
        }
    </style>
</head>
<body>

    <section id="app1">
        <span></span>
        <button>+1</button>
        <button>-1</button>
        <button>*2</button>
        <button>÷2</button>
    </section>

    <section id="app2">
        <ul class="tab-bar">
            <li>tab1</li>
            <li>tab2</li>
        </ul>
        <ul class="tab-content">
            <li>内容1</li>
            <li>内容2</li>
        </ul>
    </section>

    <section id="app3">
        <div class="square"></div>
    </section>

    <section id="app4">
        <div class="circle"></div>
    </section>

    <script src="./main.js"></script>
</body>
</html>